<template>
  <div>
    <!-- 模板中调用props中的数据 -->
    <h1>我是子组件 -- {{ childtitle }} -- {{ num }}</h1>
    <hr />
    <button @click="() => setTitleFn(Date.now() + '')">修改title</button>
  </div>
</template>

<script>
export default {
  // 接受父传入过来的数据 props
  //[]简单写 {}标准写法，一般用于定义组件所用
  // props:[]/{}
  // 数组方式没有办法设置值和类型的验证
  // props: ["childtitle"],
  props: {
    childtitle: {
      // 指定props传入的数据类型 和js中的数据类型是一样的，但是首字母要求大写
      type: String,
      // 验证 必填
      required: true,
    },
    num: {
      // 可以是多个类型
      // type:[Number,String]
      type: Number,
      // 自定义验证规则
      validator: (value) => {
        // true表示验证通过,false不通过
        return value > 150 ? false : true;
        /* if (value > 150) {
          throw new Error("值太大");
        }
        return true; */
      },
      // 默认值设置 直接给值（基础类型直接给值） 复杂类型用回调函数，通过返回给值
      default: 130,
    },
    // 引用类型用回调函数的方式来传入值
    user: {
      type: Object,
      default: () => ({ id: 1, name: "lisi" }),
    },
    /* setTitleFn: {
      type: Function,
    }, */
    setTitleFn: Function,
  },

  mounted() {
    // 生命周期中获取props中的数据
    // console.log(this.childtitle);
  },
};
</script>

<style lang="scss" scoped>
</style>